"use client";

import { useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from "@/components/ui/select";
import { 
  getAllFinals, 
  getToneChineseName,
  getFinalEncoding
} from "@/lib/ganyin-data";

interface GanyinSearchProps {
  onSearch: (final: string, tone: number | null) => void;
}

export default function GanyinSearch({ onSearch }: GanyinSearchProps) {
  const [selectedFinal, setSelectedFinal] = useState<string>("");
  const [selectedTone, setSelectedTone] = useState<string>("");
  
  const allFinals = getAllFinals();
  
  const handleSearch = () => {
    if (!selectedFinal) return;
    
    const tone = selectedTone && selectedTone !== "all" ? parseInt(selectedTone) : null;
    onSearch(selectedFinal, tone);
  };
  
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>搜索干音编码</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <label htmlFor="final-select" className="text-sm font-medium">
                韵母
              </label>
              <Select
                value={selectedFinal}
                onValueChange={setSelectedFinal}
              >
                <SelectTrigger id="final-select">
                  <SelectValue placeholder="选择韵母" />
                </SelectTrigger>
                <SelectContent>
                  {allFinals.map((final) => (
                    <SelectItem key={final} value={final}>
                      {final}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            
            <div className="space-y-2">
              <label htmlFor="tone-select" className="text-sm font-medium">
                声调
              </label>
              <Select
                value={selectedTone}
                onValueChange={setSelectedTone}
              >
                <SelectTrigger id="tone-select">
                  <SelectValue placeholder="选择声调（可选）" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部声调</SelectItem>
                  {[1, 2, 3, 4].map((tone) => (
                    <SelectItem key={tone} value={tone.toString()}>
                      {tone} - {getToneChineseName(tone)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          
          <Button 
            onClick={handleSearch}
            disabled={!selectedFinal}
            className="w-full"
          >
            <Search className="mr-2 h-4 w-4" />
            搜索
          </Button>
          
          {selectedFinal && (
            <div className="mt-4">
              <h3 className="text-lg font-semibold mb-2">预览</h3>
              <div className="bg-muted p-4 rounded-md">
                {selectedFinal && getFinalEncoding(selectedFinal) && (
                  <div className="space-y-2">
                    {getFinalEncoding(selectedFinal)?.display.map((display, index) => {
                      const tone = index + 1;
                      if (selectedTone && selectedTone !== "all" && parseInt(selectedTone) !== tone) return null;
                      
                      return (
                        <div key={display} className="flex items-center justify-between">
                          <span className="font-bold">{display} ({getToneChineseName(tone)})</span>
                          <span className="ganyin-symbol private-use-char">
                            {getFinalEncoding(selectedFinal)?.encodings[display]}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}